<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="%% CSS_DIR %%/d3viz.css"/>
	<link rel="stylesheet" href="%% CSS_DIR %%/d3-context-menu.css"/>
	<script type="text/javascript" src="%% JS_DIR %%/d3viz.js"></script>
	<script type="text/javascript" src="%% JS_DIR %%/d3.v3.min.js"></script>
	<script type="text/javascript" src="%% JS_DIR %%/dagre-d3.min.js"></script>
	<script type="text/javascript" src="%% JS_DIR %%/graphlib-dot.min.js"></script>
	<script type="text/javascript" src="%% JS_DIR %%/d3-context-menu.js"></script>
</head>
<body>
	<div id='menu' class='menuBar'>
	    <input name="resetNodes" 
	           type="button" 
	           value="Reset nodes"
	           onclick="resetNodes()"/>
	    <input name="releaseNodes" 
	           type="button" 
	           value="Release nodes"
	           onclick="releaseNodes()"/>
	</div>

	<script type="text/javascript">
		// Backend graph in DOT format
		var dotGraph = graphlibDot.read("%% DOT_GRAPH %%");
		// Frontend graph for visualization
		var graph = {};
		
		var forceLayout;
		var isProfiled = false; // true if profiling information available
		var useProfileColors = false;
		var fixOnInit = true; // fix nodes on initialization
		var maxProfilePer = 0;
		var profileColors = ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15"];
		var pad = 10;
		var isEditNode = false; // true if node is edited
		var menuItems = [
			{
				title: 'Edit',
				action: function(elm, d, i) { editNode(elm, d); }
			},
			{
				title: 'Release',
				action: function(elm, d, i) { releaseNode(d); }
			}
		];

		// Create main panel
		d3.select('body').select('svg').remove();
		var svg = d3.select('body').append('svg')
			.attr('width', '100%')
			.attr('height', '95%');
		var pane = svg.append('g');
		
		// Zoom behaviour
		var zoom = d3.behavior.zoom()
			.scaleExtent([0.2, 8])
			.on('zoom', function(d) {
				var trans = d3.event.translate;
				trans[0] += 300;
				trans[1] += 100;
				pane.attr('transform', 'translate(' + trans + ') scale(' + d3.event.scale + ')');
			});
		svg.call(zoom);
		zoom.event(svg);
		svg.on("dblclick.zoom", null);
		
		// Edges
		var edgeDiv = d3.select('body').append('div')
			.attr('class', 'edgeTooltip')
			.style('opacity', 0.0);
		
		// Div for node details	
		var nodeInfo = d3.select('body').append('div')
			.attr('class', 'nodeInfo')
			.style('opacity', 0.0);
		
		// Definition head of edges
		var markerData = [
			{'id': 'n', 'color': 'black'},
			{'id': 'r', 'color': 'red'},
			{'id': 'b', 'color': 'dodgerblue'}];
		svg.append("defs").selectAll('marker').data(markerData).enter().append("marker")
		    .attr("id", function(d) { return 'edgeArrow_' + d.id;})
		    .attr("markerWidth", 4)
		    .attr("markerHeight", 4)
		    .attr("refX", 2)
		    .attr("refY", 2)
		    .attr("orient", "auto")
		  	.append("path")
		    .attr("d", "M0,0 L4,2 L0,4 Z")
		    .attr('fill', function(d) { return d.color;});
	
		// Initialize graph
		processDotGraph(dotGraph);		
		graph = frontEndGraph(dotGraph);
		drawGraph();
	</script>
</body>
</html>
